<template>
	<z-paging ref="paging" v-model="hots" @query="queryList" :loading-more-enabled="false"
		empty-view-img="/static/nobook.gif"
		:empty-view-img-style="{'border-radius': '50%','width':'150px','height':'150px'}">
<template #top>
	<view slot="top">
		<uv-tabs :list="tabs" @click="selectTab"></uv-tabs>
		
	</view>
</template>
		
		<view class="page">

			<uni-card title="推荐" v-if="current == 0">
				<uni-row :gutter="20">
					<uni-col :span="8" v-for="(item,index) in hots" :key="index">
						<view class="book" @click="toContent(item.title,item.url)">
							<image :src="item.cover" class="cover"></image>
							<view class="title"> {{item.title}}</view>
						</view>
					</uni-col>
				</uni-row>
			</uni-card>


			<!-- <uni-group title="分类"> -->

				<uni-card  v-if="current > 0" v-for="(item,index) in datas" :title="item.title" extra="更多>"
					@click="toType(index,item.title)">

					<view class="card_top" @click.stop="toContent(item.top.title,item.top.url)">
						<image :src="item.top.cover" class="cover" auto></image>

						<view class="content">
							<view class="title">{{item.top.title}}</view>
							<view class="desc">{{item.top.desc}}</view>
						</view>
					</view>
					<view style="margin-top: 10px; margin-bottom: 10px;">
						<uni-row :gutter="10">
							<uni-col :span="12" v-for="(book,index2) in item.children" :key="index2" class="book_item">
								<view @click.stop="toContent(book.title,book.url)" class="book_title">
									{{book.title}}<span>{{book.autor}}</span>
								</view>
							</uni-col>
						</uni-row>
					</view>

				</uni-card>

			<!-- </uni-group> -->

			<uni-group title="最新更新">
				<uni-card>

					<view style="margin-top: 10px; margin-bottom: 10px;">
						<uni-row>
							<uni-col :span="24" v-for="(book,index2) in newList" :key="index2" class="book_item">
								<view @click.stop="toContent(book.title,book.url)">
									<view class="book_title">
										{{book.type}}-{{book.title}}
									</view>
									<view class="book_title">
										<span>{{book.new}}</span>
									</view>
									<view class="book_title">
										<span>{{book.author}}：{{book.time}}</span>
									</view>
									<view class="space">

									</view>
								</view>
							</uni-col>
						</uni-row>
					</view>

				</uni-card>

			</uni-group>

			<uni-group title="最新入库">
				<uni-card>

					<view style="margin-top: 10px; margin-bottom: 10px;">
						<uni-row>
							<uni-col :span="24" v-for="(book,index2) in newList2" :key="index2" class="book_item">
								<view @click.stop="toContent(book.title,book.url)">
									<view class="book_title">
										{{book.type}}-{{book.title}}
									</view>

									<view class="book_title">
										<span>{{book.time}}</span>
									</view>
									<view class="space">

									</view>
								</view>
							</uni-col>
						</uni-row>
					</view>

				</uni-card>

			</uni-group>

		</view>
	</z-paging>
		<moveView tabTitle='书城'></moveView>
</template>


<script>
	import moveView from '/reading/components/moveView.vue'
	export default {
components:{
			moveView
		},
		data() {
			return {
				tabs: [{
					name: '推荐',
				}, {
					name: '玄幻小说',
				}, {
					name: '修真小说'
				}, {
					name: '都市小说'
				}, {
					name: '穿越小说'
				}, {
					name: '网游小说'
				}, {
					name: '科幻小说'
				}],
				current: 0,
				datas:[],
				hots: [],
				list: [],
				newList: [],
				newList2: [],
				typeList: ["/xuanhuanxiaoshuo", "/xiuzhenxiaoshuo", "/dushixiaoshuo", "/chuanyuexiaoshuo",
					"/wangyouxiaoshuo", "/kehuanxiaoshuo"
				],

			}
		},
		
		onShareAppMessage(res) {
			return {
				title: '免费笔趣阁小说阅读器，看书软件，汇聚热门小说，免费阅读全本小说。7喵番茄米读小说，免费追书神器，书荒推荐',
				// path: '/pages/book/index'
			}
		},
		onShareTimeline() {
			return {
				title: "免费笔趣阁小说阅读器，看书软件，汇聚热门小说，免费阅读全本小说。7喵番茄米读小说，免费追书神器，书荒推荐",
		
			}
		},
		methods: {
			selectTab(model) {
				var index = model.index;
				this.current = index;
				console.log(JSON.stringify(index))
				if (index > 0) {
					this.datas = this.list.filter(a => {
						return a.title == this.tabs[index].name
					})
				}
			},
			queryList() {
				this.getData();
			},
			getData() {
				
				uni.showLoading({
					title: '加载中...'
				});

				uniCloud.callFunction({
					name: 'router',
					data: {
						action: 'bookShop/getBookList'
					}
				}).then(res => {

					uni.hideLoading();
					this.$refs.paging.complete(res.result.hot);
					this.hots = res.result.hot;
					this.list = res.result.list;
					this.newList = res.result.newList;
					this.newList2 = res.result.newList2;

				})

			},
			toContent(title, link) {
				uni.navigateTo({
					url: `/reading/pages/info/index?title=${title}&index=0&url=${encodeURIComponent(link)}`
				});

			},
			toType(index, title) {
				//分类
				var url = this.typeList[index];
				uni.navigateTo({
					url: `/reading/pages/classify/index?title=${title}&url=${url}`
				})

			},
			
		}

	}
</script>

<style lang="scss">
	.book {
		display: flex;
		flex-direction: column;
		align-items: center;

		.cover {
			width: 100%;
			height: 120px;
			margin-bottom: 5px;
		}

		.title {
			font-size: 15px;
			display: -webkit-box; //将对象作为弹性伸缩盒⼦模型显⽰
			-webkit-box-orient: vertical; //设置或检索伸缩盒对象的⼦元素的排列⽅式
			-webkit-line-clamp: 2; //⼀个块元素显⽰的⽂本的⾏数
			overflow: hidden; //溢出隐藏

			height: 45px;

		}
	}

	.card_top {
		display: flex;
		flex-direction: row;

		.cover {
			width: 95px;
			height: 150px;
			object-fit: cover;
			flex-shrink: 0;
		}

		.content {
			margin-left: 10px;
			margin-right: 10px;
			display: flex;
			flex-direction: column;

			.title {
				font-size: 18px;
				font-weight: bold;
			}

			.desc {
				font-size: 12px;
				color: #999999;
				margin-top: 2px;


				display: -webkit-box; //将对象作为弹性伸缩盒⼦模型显⽰
				-webkit-box-orient: vertical; //设置或检索伸缩盒对象的⼦元素的排列⽅式
				-webkit-line-clamp: 5; //⼀个块元素显⽰的⽂本的⾏数
				overflow: hidden; //溢出隐藏
			}
		}
	}

	.book_title {

		height: 30px;
		line-height: 30px;
		font-size: 15px;

		color: #3477A8;

		overflow: hidden; //⽂字溢出隐藏
		text-overflow: ellipsis; //⽂字超出部分⽤省略号代替
		white-space: nowrap; //⽂字不换⾏

		span {
			font-size: 12px;
			color: #A2A2A2
		}
	}

	.link {
		align-self: center;
		margin-left: 20px;
		margin-right: 20px;
	}

	.space {
		width: 100%;
		height: 0.5px;
		background-color: #999999;
	}
</style>